<template>
  <div class="supplementInfo">
    <el-dialog title="补充信息" :visible.sync="isShow" center :before-close="close">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-position="left" label-width="120px">
        <el-form-item label="寄件日期" prop="date">
          <!-- <el-input v-model="form.date" placeholder=""></el-input> -->
          <el-date-picker
            v-model="form.date"
            align="right"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="顺丰单号" prop="SF_number">
          <el-input v-model="form.SF_number" placeholder="请输入顺丰单号" :maxlength="15"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      form: {
        date: '',
        SF_number: '',
      },
      rules: {
        date: [
          { required: true, message: '请输入通告标题', trigger: 'change' }
        ],
        SF_number: [
          { required: true, message: '请输入通告摘要', trigger: 'change' }
        ],
      },
      id: null

    }
  },
  methods: {
    show(data) {
      this.isShow = true
      this.id = data.id
    },
    close() {
      this.$refs['ruleForm'].resetFields()
      this.isShow = false
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitPost()
        } else {
          return false;
        }
      })
    },
    submitPost () {
      let params = {
        invoiceRecord: this.id,
        mailing_data: this.form.date,
        odd_numbers: this.form.SF_number
      }

      this.$axios.put(`api/invoice/${this.id}/update_invoice_record`, params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message:"更新信息成功！"
          })
          this.$emit('refresh')
          this.close()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .supplementInfo {
    .el-dialog {
      max-width: 500px;
    }
    .el-date-editor {
      width: 100%;
    }
  }
</style>
